<template>
  <div class="h-full flex flex-col">
    <div class="flex-grow">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick">
        <template #topWrap>
          <div class="text-[#242930]">
            <span class="text-[--autata-font-gray-color]"
              >{{ t("store_manage.form.store_name") }}：</span
            >
            {{ route.query.name }}
          </div>
        </template>
        <template #status_default="{ row }">
          <el-tag :type="formatStatusText(row).status">
            {{ formatStatusText(row).text }}
          </el-tag>
        </template>
        <template #version_default="{ row }">
          {{ row.deviceFormulaUseRecord?.name }}
        </template>
      </AuTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { deviceGetList, DeviceProp } from "@/api/teaInfuser/device";
import { useRoute, useRouter } from "vue-router";
import { AuTable } from "@/components/AuTable";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { formulaVerGetList } from "@/api/teaInfuser/formula";
import { useI18n } from "vue-i18n";

const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const tableRef = ref();

const gridOption = reactive<PropDefines>({
  isServerPage: true,
  columns: [
    { field: "device_id", title: "store_manage.form.device_id" },
    { field: "store_name", title: "store_manage.form.store_name" },
    {
      field: "device_status",
      title: "store_manage.form.device_status",
      slots: {
        default: "status_default"
      }
    },
    {
      field: "deviceFormulaUseRecord",
      title: "store_manage.form.formula_version",
      slots: {
        default: "version_default"
      }
    },
    { field: "create_time", title: "store_manage.form.create_time" }
  ],
  actions: [ACTION_TYPE.REFRESH],
  operateTools: [],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        return deviceGetList(params);
      },
      param: () => {
        return {
          store_id: route.query.id
        };
      }
    }
  }
});

const toPrevPage = () => {
  router.go(-1);
};

type status = "success" | "warning" | "info" | "primary" | "danger";

function formatStatusText(row: DeviceProp): {
  text: string;
  status: status;
} {
  let text = "",
    status: status = "success";
  if (row.device_status === 0 && row.store_id != null) {
    text = t("store_manage.form.normal");
    status = "success";
  } else if (row.store_id === null) {
    text = t("store_manage.form.not_activated");
    status = "info";
  } else if (row.device_status === 1) {
    text = t("store_manage.form.locked");
    status = "danger";
  }
  return {
    text,
    status
  };
}

const actionClick = ({ key }: { key: string }) => {
  switch (key) {
    case ACTION_TYPE.REFRESH:
      tableRef.value?.refresh();
      break;
  }
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.device-table {
  :deep(table) {
    background: #f5f9ff !important;
  }

  :deep(.el-table th.el-table__cell) {
    background: #f5f9ff;
  }

  :deep(.el-table tr) {
    background: #f5f9ff;
  }
}
</style>
